Namespace("sketch.ui.iphone");

(function(fwk, ui) {
    ui.iphone.BarItem = klass(ui.common.ButtonBase, {
        __type__: "ui.iphone.Button",
        _constructor: function() {
            var that = this;

            ui.iphone.BarItem.SuperConstructor.apply(this, arguments);

            this._style = this.properties.createProperty("style", "Style", "button_toolbar_normal").editorTemplate("#editor-dropdown")
                    .possibleValues({"button_toolbar_normal": "Normal", "button_toolbar_black": "Black", "button_toolbar_silver": "Silver"})
                    .useInModel();

            this._type = this.properties.createProperty("type", "Type", "normal").editorTemplate("#editor-dropdown")
                    .possibleValues({"normal": "Normal", "leftArrow": "Left Arrow", "rightArrow": "Right Arrow", transparent: "Transparent"})
                    .useInModel();

            this._enabled = this.properties.createProperty("enabled", "Enabled", true).useInModel().editorTemplate("#editor-checkbox");

            this._enabled.bind(function(event){
                var stroke = event.newValue ? "#ffffff" : "#a3adba";
                that.font().color(stroke);
            });

            this.properties.createProperty("imageSrc", "Image source", null)
                .editorTemplate("#editor-imagepicker", "toolbar");

            var mode = this.properties.createProperty("mode", "Mode", "textOnly")
                .editorTemplate("#editor-dropdown")
                .possibleValues({textOnly: "Text only", imageOnly: "Image only"});

            var textAlign = this.properties.createProperty("textAlign", "Text align", "center")
                    .possibleValues({'left':'Left', 'center':'Center', 'right':'Right'})
                    .useInModel()
                    .editorTemplate("#editor-dropdown");

            var setTextModeSize = function(){
                that.height(30);
                that.width(75);
            };
            var setImageModeSize = function(){
                that.height(30);
                that.width(30);
            };

            mode.bind(function(event){
                if (event.newValue === "imageOnly"){
                    var image = new fwk.ImageElement();
                    //image.showEmptyImage("/img/ui/no-image-small.png");
                    image.onresize.bind(function(){
                        var parent = that.parent();
                        if (parent){
                            parent.invalidate();
                        }
                    });
                    image.src(that.properties.imageSrc());
                    that.properties.imageSrc.bind(image.properties.src.bindingPoint);
                    that.imageBuffer = image;
                    setImageModeSize();
                    that.labelBuffer = null;
                }
                else{
                    that.labelBuffer = new fwk.TextBuffer(that.boxProperties(),
                        that.properties.label, that.properties.font, that.properties.textAlign);
                    setTextModeSize();
                    that.imageBuffer = null;
                }
            });
            mode("textOnly");
            this.font().color(fwk.Brush.White.cssColor);
        },

        style: function(label) {
            if (arguments.length === 1) {
                this.properties.set(this._style.propertyName, this._style.getValueByLabel(label));
            }
            return this._style.value;
        },
        type: function(label) {
            if (arguments.length === 1) {
                this.properties.set(this._type.propertyName, this._type.getValueByLabel(label));
            }
            return this._type.value;
        },
        label: function(value) {
            return this.properties.label(value);
        },
        imageSrc: function(value){
            return this.properties.imageSrc(value);
        },
        mode: function(value){
            return this.properties.mode(value);
        },
        enabled: function(value) {
            if (arguments.length === 1) {
                this.properties.set(this._enabled.propertyName, value);
            }
            return this._enabled.value;
        },

        drawSelf: function(context) {
            var x = this.left(),
                    y = this.top(),
                    w = this.width(),
                    h = this.height();

            context.save();

            var style = this.style();
            var brush = fwk.Resources[style + (this._enabled.value ? "" : "_disabled")].toBrush(context, x, y, x, y + h);
            var stroke;
            var cornerRadius = 3;
            var arrowWidth = 15;
            var labelOffset = 3;

            switch (style) {
                case "button_toolbar_normal":
                    stroke = "#485d7a";
                    break;
                case "button_toolbar_black":
                    stroke = "#070707";
                    break;
                case "button_toolbar_silver":
                    stroke = "#475566";
                    break;
            }

            switch (this.type()) {
                case "normal":
                    context.roundedRect(x, y, w, h, cornerRadius, brush, stroke);
                    break;
                case "leftArrow":
                    if (this.labelBuffer){
                        this.labelBuffer.offset({x:labelOffset, y:0});
                    }
                    context.angularArrowButton(x, y, w, h, cornerRadius, arrowWidth, "left", brush, stroke);
                    break;
                case "rightArrow":
                    if (this.labelBuffer){
                        this.labelBuffer.offset({x:-labelOffset, y:0});
                    }
                    context.angularArrowButton(x, y, w, h, cornerRadius, arrowWidth, "right", brush, stroke);
                    break;
            }

            if (this.labelBuffer){
                this.labelBuffer.draw(context);
            }
            else if (this.imageBuffer){
                this.imageBuffer.left(this.left() + 2);
                this.imageBuffer.top(this.top() + 2);
                this.imageBuffer.draw(context);
            }

            context.restore();

            ui.iphone.BarItem.Super.drawSelf.apply(this, arguments);
        }
    });
})(sketch.framework, sketch.ui);